<template>
	<view class="withDraw">
		<view class="topTitle">
			<titleItem title1st="待提现佣金" subTitle="¥200.00">
			</titleItem>
		</view>
		<view class="borderView">
		</view>
		<view class="item">
			<view class="">
				待提现佣金
			</view>
			<view class="jeNum">
				￥200.00
			</view>
		</view>
		<view class="item">
			<view class="">
				提现方式
			</view>
			<view class="txType">
				<u-icon name="chat-fill" color="#2CB9A4" size="28"></u-icon><text>微信钱包</text>
			</view>
		</view>
		<view class="item">
			<text class="u-demo-block__title">提现金额:</text>
		</view>
		<view class="txje item">
			<u--input placeholder="请输入提现金额" border="surround" v-model="value" @change="change"></u--input>
		</view>
		<view class="item info">
			最低提现金额￥100.00，每日最高提现金额￥10000,提现手续费2%
		</view>
		<view class="borderView item">
		</view>
		<view class="botBtn">
			<view style="width: 100%;">
				<u-button class="custom-style" text="提现"
					customStyle=" background:linear-gradient(90deg, #218CC9 0%, #2CB9A4 100%);color:#fff;margin-top:50px;border-radius: 30px;"
					@click="goAuth">
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import titleItem from '@/components/common/titleItem.vue'
	export default {
		components: {
			titleItem
		},
		data() {
			return {

			};
		}
	}
</script>
<style>
	page{
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.borderView {
		width: 100%;
		padding: 1rpx;
		background: linear-gradient(to left,
				transparent 50%,
				#2CB9A4 50%,
				#2CB9A4 100%);
		background-size: 10px 1px;
		/* 第一个参数控制虚线的间隙（利用的是图片的放大效果一样），第二个参数控制虚线的粗细 */
		background-repeat: repeat-x;
		background-position: top;
		/* 控制方向：top、bottom */
	}

	.withDraw {
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		font-size: 28rpx;
		color: #1D1B20;

		.topTitle {
			margin-left: -20px;
			margin-right: 20px;
		}
		.info{
			color: #545454;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
		}

		.txje {
			width: 100%;
		}

		.item {
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
			// color: #828282;

			.jeNum {
				// color: #2CB9A4;
			}
			.txType{
				display: flex;
				align-items: center;
			}
			.u-demo-block {
				display: flex;
				align-items: center;
				width: 100%;

				.u-demo-block__title {
					margin-right: 20rpx;
				}

				.u-demo-block__content {
					flex: 1;
				}
			}

		}
	}
</style>